<template>
  <el-card class="box-card">
    <div class="card-title">
      <span class="title_span">{{ card_title }}</span>
    </div>
    <div class="card-content">
      <div class="content">
        <template v-for="(value, index) in items">
          <div class="item-content">
            <span>{{ value.content }}</span>
            <!-- <div v-if="value.value == 100" class="right-label" :style="{ backgroundColor:'#05ff01'  }">{{ value.value + '%' }}</div>
          <div v-else-if="value.value >= 96" class="right-label" :style="{ backgroundColor:'#fedd31'}">{{ value.value + '%' }}</div>
          <div v-else class="right-label" :style="{ backgroundColor:'#f75363'}">{{ value.value + '%' }}</div> -->
            <template v-if="index != items.length">
              <hr
                style="margin: 0px"
                color=#e7e7e7
                size=1
              />
            </template>
          </div>
        </template>
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  props: {
    card_title: String
  },
  data () {
    return {
      items: [
        {
          content: "糖化",
          value: 100
        },
        {
          content: "发酵",
          value: 95
        },
        {
          content: "过滤",
          value: 97
        },
        {
          content: "清酒",
          value: 97
        },
        {
          content: "包装",
          value: 93
        },
        {
          content: "包装",
          value: 93
        },
        {
          content: "包装",
          value: 93
        },
        {
          content: "包装",
          value: 93
        },
        {
          content: "包装",
          value: 93
        },
        {
          content: "包装",
          value: 93
        },
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
        ,
        {
          content: "包装",
          value: 93
        }
      ]
    }
  }
}
</script>
<style scoped>
.right-label {
  width: 40px;
  height: 30px;
  border-radius: 10px;
  background-color: #676668;
  float: right;
  margin-right: 10px;
  color: white;
  text-align: center;
}
.box-card {
  line-height: 20px;
  border-radius: 10px;
  width: 100%;
}
/* .box-card /deep/ .el-card__body {
  padding-top: 0px;
} */
.title_span {
  top: 30%;
  left: 5%;
  position: relative;
  color: #6d6f71;
}
.card-title {
  text-align: left;
  /* padding-top: 20px; */
  width: 120%;
  font-size: 20px;
  height: 60px;
  margin: -20px;
  background-color: #dbf0e8;
  color: black;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  position:relative;
  /* 让鼠标不能选中 */
  user-select: none;
}
.card-content {
  position: relative;
  text-align: left;
  margin-top: 40px;
  height: 200px;
  font-size: 13px;
  color: #808081;
  overflow-y: hidden;
  overflow-x: hidden;
  /* 让鼠标不能选中 */
  user-select: none;
}
/* .card-content::-webkit-scrollbar {display:none} */
.card-content:hover {
  overflow-y: scroll;
}
/*滚动条样式*/
.card-content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.card-content::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.card-content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.item-content:hover {
  cursor: pointer;
  background-color: #ecf3ff;
}
.item-content {
  line-height: 2.5;
}
</style>
